<template>
  <div>
    <p v-if="isLoding">Loding</p>
    <div v-else>
        <img :src="imgUrl" alt="">
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
 import {ref,onMounted} from 'vue'
 import axios from 'axios'
 const isLoding = ref(true)
 const imgUrl = ref<string>('')
 onMounted(() => {
  axios.get("https://api.thecatapi.com/v1/images/search")
  .then((res) => {
    imgUrl.value = res.data[0].url
    isLoding.value = false
  })
  .catch((e) => {
    console.log(e.message);
  })
 })
</script>